<template>
	<view class="root" :style="{ padding: `30rpx 0` }">
		<radio-group @change="setDefault">
			<view
				v-for="(item, index) in addressList"
				:key="index"
				:style="{ margin: `20rpx`, padding: `30rpx 20rpx` }"
				class="bgc-fff br-20"
			>
				<view @click="chooseAddress(item)" hover-class="tap-hover" hover-stay-time="90">
					<text class="color-333 fs-30 fw-700">
						{{ item.address }} - {{ item.address_name }}
					</text>
					<text class="color-999 fs-28 mt-18">
						<text>{{ item.truename }}</text>
						<text class="ml-26">{{ item.mobile }}</text>
					</text>
				</view>

				<view class="fd-row jc-sb mt-50">
					<label>
						<radio
							:style="{ transform: `scale(0.81)` }"
							:value="item.address_id.toString()"
							color="#2e54fd"
							:checked="Boolean(item.isDefault)"
						/>
						<text class="color-999 fs-28">设为默认</text>
					</label>

					<view class="fd-row">
						<button
							class="color-999 fs-28 border-none lh-2 pl-22 pr-22"
							hover-class="tap-hover"
							:plain="true"
							@click="remove(index)"
						>
							删除
						</button>
						<navigator
							class="color-999 fs-28 lh-2 pl-22 pr-22"
							hover-class="tap-hover"
							hover-stay-time="50"
							:url="`/pages/main/setAddress?address_id=${item.address_id}`"
						>
							编辑
						</navigator>
					</view>
				</view>
			</view>
		</radio-group>

		<navigator
			class="br-20 bgc-2e54fd color-fff fs-34 fw-600 lh-3 text-center"
			url="/pages/main/setAddress"
			:style="{ margin: `98rpx 20rpx` }"
			hover-class="tap-hover"
			hover-stay-time="50"
		>
			新增地址
		</navigator>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class Address extends Vue {
		// component property
		addressList: AnyObject[] = [];
		type: string | void = void 0;
		onLoad({ type }: AnyObject) {
			this.type = type;
		}
		onShow() {
			uni.showLoading({ title: "Loading...", mask: true });
			this.$request.get("/addressList").then(({ data }) => {
				this.addressList = data;
				uni.hideLoading();
			});
		}

		setDefault({ detail }: AnyObject) {
			this.$request.get("/addressDefault", { address_id: detail.value });
		}
		async remove(index: number) {
			const [modalFail, modalRes]: any = await uni.showModal({
				title: "提示",
				content: "确定要删除吗？",
				confirmColor: "#f50",
			});
			if (modalFail) return;

			modalRes.confirm &&
				this.$request
					.get("/addressDelete", { address_id: this.addressList[index].address_id })
					.then(({ msg: title }) => {
						this.addressList.splice(index, 1);
						uni.showToast({ title });
					});
		}
		chooseAddress(address: AnyObject) {
			if (this.type !== "chooseAddress") return;
			this.$store.commit("selectAddress", address);
			uni.navigateBack({});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>